<style lang="less" scoped>
  .star{
    margin: 10px 20px 30px;
    // 用户基础数据
    .summary{
      .summary-item {
        height: 7rem;
        width: 19%;
        background-color: #ffffff;
        border-radius: 0rem;
        border: solid 0rem #e5e5e5;
        flex-direction: column;
        text-align: center;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        span{
            font-family: PingFang-SC-Regular;
            font-size: 1rem;
            color: #666666;
        }
        p{
            font-family: PingFang-SC-Medium;
            font-size: 2rem;
            color: #e6a23c;
            i{
                font-style: normal;
            }
        }
        .summary-item-l{
            float: left;
            height: 4rem;
            width: 50%;
            margin: 1.5rem auto;
            border-right:2px solid #f8f8f8; 
          span{
              font-size: 14px;
          }
          p{
              font-size: 18px;
          }
        }
        .summary-item-r{
            float: right;
            height: 4rem;
            width: 50%;
            margin: 1.5rem auto;
          span{
              font-size: 14px;
          }
          p{
              font-size: 18px;
          }
        }
      }
    }
    // 更新时间
    .update-time{
        line-height: 2rem;
        font-family: PingFang-SC-Regular;
        font-size: 1rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #acacac;
        text-align: right;
        margin-right:1rem; 
    }
    .title{
        text-align: left;
        line-height: 4rem;
        color: #222222;
        font-size: 1.5rem;
        span{
            padding-left: 0.5rem;
            font-size: 1rem;
            color: #666666;
        } 
    }
    // 近三天运营数据
    .summary-table{
        background-color: #ffffff;
        padding:0 2rem 2rem; 
        /deep/.table{
            /deep/th,/deep/td{
                text-align: center;
                background-color: #f8f8f8;
            }
        }
    }
    // 互动用户画像
    .chaets-box{
        background-color: #ffffff;
        margin: 20px 0;
        padding: 0 10px;
        .title{
            padding: 0 10px;
        }
        .chaets{
            width: 100%;
            .chaets-item{
                width: 50%;
                background-color: #f8f8f8;
                margin: 10px;
                .table{
                    margin: 0px 40px 30px;
                    /deep/th,/deep/td{
                        text-align: center;
                    }
                    p{
                        height: 22px;
                        margin: 17px 0 20px;
                        font-size: 16px;
                        color: #222222;
                    }
                }
            }
        }
    }
  }
</style>

<template>
  <div class="star">
    <!-- 用户基础数据 -->
    <div class="box-between summary">
        <div class="summary-item box-center">
            <span>粉丝数</span>
            <p>{{summaryFans.follower_count | thousand }}</p>
        </div>
        <div class="summary-item box-center">
            <span>作品数</span>
            <p>{{summaryFans.video_count | thousand }}</p>
        </div>
        <div class="summary-item">
            <div class="summary-item-l">
                <span>获赞数</span>
            <p>{{summaryFans.total_favorited | thousand }}</p>
            </div>
            <div class="summary-item-r">
                <span>集均获赞数</span>
                <p>{{summaryFans.fav_per_video | thousand }}</p>
            </div>
        </div>
        <div class="summary-item">
            <div class="summary-item-l">
                <span>评论数</span>
                <p>{{summaryFans.total_comment | thousand }}</p>
            </div>
            <div class="summary-item-r">
                <span>集均评论数</span>
                <p>{{summaryFans.comment_per_video}}<i></i></p>
            </div>
        </div>
        <div class="summary-item">
            <div class="summary-item-l">
                <span>转发数</span>
                <p>{{summaryFans.total_forward | thousand }}</p>
            </div>
            <div class="summary-item-r">
                <span>集均转发数</span>
                <p>{{summaryFans.forward_per_video}}<i></i></p>
            </div>
        </div>
    </div>
    <div class="update-time">数据更新时间：{{summaryFans.update_time_str}}</div>
    <!-- 近三天运营数据 -->
    <div class="summary-table">
        <p class="title">近三天运营数据<span>模块说明文字</span></p>
        <div class="table">
            <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="date" label="" width="80"></el-table-column>
            <el-table-column prop="reply_count" label="回复评论数" ></el-table-column>
            <el-table-column prop="recommend_engagement" label="推荐增粉机会" ></el-table-column>
            <el-table-column prop="catch_engagement" label="把握增粉机会" ></el-table-column>
            <el-table-column prop="follower_increment" label="粉丝增量" ></el-table-column>
            <el-table-column prop="favoriting_increment" label="点赞增量" ></el-table-column>
            <el-table-column prop="comment_increment" label="评论增量" ></el-table-column>
            <el-table-column prop="forward_increment" label="转发增量" ></el-table-column>
            </el-table>
        </div>
    </div>
    <!-- 互动用户画像 -->
    <div class="chaets-box">
        <p class="title">互动用户画像<span>模块说明文字</span></p>
        <div class="box-between chaets">
            <div class="chaets-item">
                <pie id="jiangyuxinxi" :time="refreshData" style="width:100%;height:300px;" />
            </div>
            <div class="chaets-item">
                <pie id="jiangnxi" :time="refreshData" style="width:100%;height:300px;" />
            </div>
        </div>
        <div class="box-between chaets">
            <div class="chaets-item">
                <barl id="qeewr" :time="refreshData" style="width:100%;height:300px;" />
            </div>
            <div class="chaets-item">
                <barl id="wwwr" :time="refreshData" style="width:100%;height:300px;" />
            </div>
        </div>
        <div class="box-between chaets">
            <div class="chaets-item">
                <div class="table">
                    <p>地域分布</p>
                    <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="comment_increment" label="省份" ></el-table-column>
                    <el-table-column prop="forward_increment" label="占比" ></el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="chaets-item">
                <div class="table">
                    <p>学校分布</p>
                    <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="comment_increment" label="学校名称" ></el-table-column>
                    <el-table-column prop="forward_increment" label="占比" ></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
    <div class="chaets-box">  
        <p class="title">粉丝数分析<span>模块说明文字</span></p>  
        <div class="box-between chaets">
            <div class="chaets-item" style="width:100%;height:300px;">
                <chartline id="fghgfdgh" :time="refreshData" style="width:100%;height:300px;" />
            </div>
        </div>
        <div class="box-between chaets">
            <div class="chaets-item" style="width:100%;">
                <bartb id="trewertyu" :time="refreshData" style="width:100%;height:300px;" />
            </div>
        </div>
    </div>
    <div class="chaets-box">     
        <p class="title">评论词云<span>模块说明文字</span></p> 
        <div class="box-between chaets">
            <div class="chaets-item" style="width:100%;">
                <wordcloud id="uytrewerty" :time="refreshData" style="width:100%;height:200px;" />
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import pie from '@/components/echarts/pie'
import barl from '@/components/echarts/barl'
import chartline from '@/components/echarts/chartline'
import bartb from '@/components/echarts/bartb'
import wordcloud from '@/components/echarts/wordcloud'
export default {
    name: 'star',
    // 组件
    components: {pie,barl,chartline,bartb,wordcloud},
    // 数据
    data() {
        return {
            refreshData: 1000 * 60 * 5,
            // 用户基础数据
            summaryFans:{
                "follower_count": 1926124,
                "video_count": 209,
                "total_favorited": 17950901,
                "fav_per_video": 85889,
                "total_comment": 301031,
                "comment_per_video": 1440,
                "total_forward": 5145,
                "forward_per_video": 25,
                "update_time": 1575881290,
                "update_time_str": "2019-12-09 16:48:10"
            },
            // 更新时间
            updateTime:'2019-10-19 12:22:11',
            // 近三天运营数据
            tableData:[
                {
                    "date":"今天",
                    "reply_count": 11,
                    "recommend_engagement": 11,
                    "catch_engagement": 11,
                    "follower_increment": 11,
                    "favoriting_increment": 11,
                    "comment_increment": 11,
                    "forward_increment": 11
                },
                {
                    "date":"昨天",
                    "reply_count": 22,
                    "recommend_engagement": 22,
                    "catch_engagement": 22,
                    "follower_increment": 22,
                    "favoriting_increment": 22,
                    "comment_increment": 22,
                    "forward_increment": 22
                },
                {
                    "date":"前天",
                    "reply_count": 33,
                    "recommend_engagement": 33,
                    "catch_engagement": 123,
                    "follower_increment": 123,
                    "favoriting_increment": 123,
                    "comment_increment": 123,
                    "forward_increment": 123
                }
            ]

        }
    },
    // 初始化数据
    mounted() {
    },
    // 方法
    methods: {
    },
    // 计算属性
    computed: {},
    // 监听数据变化
    watch: {},
    filters:{
        thousand:function(value){
            if (!value) return ''

            if(Number(value)>=10000){
                return Number(Number(value)/10000).toFixed(1)+'w';
            }else{
                 return Number(value)
            }
        }
    }
  }
</script>


